<template>
    <div class="execution">
      <basic-container class="title">
        <el-form ref="form" :model="form" label-width="100px">
          <el-form-item label="登陆账号：">
            <el-input v-model="form.name" value="账号名称" class="input"></el-input>
          </el-form-item>
          <!--添加密码与确定密码-->
          <el-form-item label="密码：" prop="pass">
            <el-input type="password" v-model="form.pass" autocomplete="off" class="input"></el-input>
          </el-form-item>
          <el-form-item label="确认密码：" prop="checkPass">
            <el-input type="password" v-model="form.checkPass" autocomplete="off" class="input"></el-input>
          </el-form-item>
          <!--邮箱-->
          <el-form-item
            prop="email"
            label="邮箱："
            :rules="[
              { required: true, message: '请输入邮箱地址', trigger: 'blur' },
              { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
            ]"
          >
            <el-input v-model="form.email" class="input"></el-input>
          </el-form-item>
          <!--电话号码-->
          <el-form-item
            prop="tel"
            label="联系电话："
            :rules="[
              {required: true,message:'请输入联系电话',trigger:'blur'}
            ]"
          >
            <el-input v-model="form.tel" class="input"></el-input>
          </el-form-item>


          <!--确定按钮-->
          <el-form-item>
            <el-button type="primary" @click="onSubmit">编辑</el-button>
            <el-button>保存</el-button>
          </el-form-item>

        </el-form>


      </basic-container>
    </div>
</template>

<script>
    export default {
        name: "index",
        data() {
          var validatePass = (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请输入密码'));
            } else {
              if (this.ruleForm.checkPass !== '') {
                this.$refs.ruleForm.validateField('checkPass');
              }
              callback();
            }
          };
          var validatePass2 = (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请再次输入密码'));
            } else if (value !== this.ruleForm.pass) {
              callback(new Error('两次输入密码不一致!'));
            } else {
              callback();
            }
          };
          return {
            form: {
              name: 'hangrui.zhang',
              pass: '',
              checkPass: '',
              email: '',
              tel:''
            },
            rules: {

              pass: [
                { validator: validatePass, trigger: 'blur' }
              ],
              checkPass: [
                { validator: validatePass2, trigger: 'blur' }
              ]
            }
        }
      },
      methods: {
        onSubmit() {
          console.log('submit!');
        }
      }
    }
</script>

 <style scope>
.input {
  width: 30%;
}
 </style>

